<!DOCTYPE html>
<html lang="en">

<head>
    <title>vr sphere example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <script src="../build/three.js"></script>
    <script src="../build/mxreality.js"></script>
    <script src="./js/avr.utils.js"></script>
    <style type="text/css">
    </style>
</head>

<body>
    <div id="example"></div>
    <script>
        window.onload = function () {
            init();
        }
        function init() {
            var vr = new VR({ 'id': 'example', 'camera_para': { "fov": 60 } });
            vr.vrbox.radius = 50;

            if (!AVR.isCrossScreen()) {
                vr.useGyroscope = false;
            }
            vr.loadProgressManager.onLoad = function () {
                //vr.controls.enable=false;
            }
            vr.loadProgressManager.onProgress = function () {
                console.log("onProgress")
            }
            vr.loadProgressManager.onError = function () {
                console.log("onError")
            }
            vr.init(function () {

            });
            vr.playPanorama('textures/puydesancy.jpg');

            //初始化相机中心点事件
            var cameraEvent = AVR.bindCameraEvent(vr, {
                vectorRadius: vr._containerRadius,
                speed: 10,
                tubularSegments: 10,
                trigger: function (e) {
                    if (e) {
                        switch (e.name) {
                            case 'btn1':
                                //TODO
                                alert('事件触发')
                                break;
                            case 'btn2':

                                break;
                            default:
                                break;
                        }
                    }
                },
                move: function (e) {
                    intersectObj = e[0].object;
                    if (intersectObj.meshType == 'markIcon') {
                        switch (intersectObj.name) {
                            case 'btn1':
                                cameraEvent.hover(intersectObj);
                                break;
                            default:
                                break;
                        }
                    } else {
                        cameraEvent.leave(intersectObj);
                    }
                },
                empty: function () {
                    cameraEvent.leave();
                }
            })
            var util = new VRUtils(vr);

            util.markIcon("textures/forward.png", new THREE.Vector3(0, 0, -10), 'btn1', 'title1', 1, 1);
            util.markIcon("textures/left.png", new THREE.Vector3(10, 0, -10), 'btn2', 'title2', 1, 1);
            animate();
            function animate() {
                requestAnimationFrame(animate);
                if (AVR.isCrossScreen()) {
                    cameraEvent.updatePosition();
                } else {
                    util.markIconInViews();
                    if (vr.markIconGroup) {
                        for (var i = 0; i < vr.markIconGroup.children.length; i++) {
                            vr.markIconGroup.children[i].lookAt(vr.vr.camera.position);
                        }
                    }
                }
            }
        }


    </script>
</body>

</html>